<template>
  <div class="sobClg">
    <div>
      <el-table :data="empSalaries.data" border stripe style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="130">
        </el-table-column>
        <el-table-column prop="workID" label="工号" width="160">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="250">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="180">
        </el-table-column>
        <el-table-column prop="department.name" label="所属部门" width="220">
        </el-table-column>
        <el-table-column label="工资账套" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.salary.name">{{
              scope.row.salary.name
            }}</el-tag>
            <el-tag type="warning" v-else>暂未设置</el-tag>
          </template></el-table-column
        >
        <el-table-column type="expand" label="工资账套详细" width="200">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="基本工资">
                <span>{{ scope.row.salary.basicSalary }}</span>
              </el-form-item>
              <el-form-item label="奖金">
                <span>{{ scope.row.salary.bonus }}</span>
              </el-form-item>
              <el-form-item label="交通补助">
                <span>{{ scope.row.salary.trafficSalary }}</span>
              </el-form-item>
              <el-form-item label="午餐补助">
                <span>{{ scope.row.salary.lunchSalary }}</span>
              </el-form-item>
              <el-form-item label="养老金比率">
                <span>{{ scope.row.salary.pensionPer }}</span>
              </el-form-item>
              <el-form-item label="养老金基数">
                <span>{{ scope.row.salary.pensionBase }}</span>
              </el-form-item>
              <el-form-item label="公积金比率">
                <span>{{ scope.row.salary.accumulationFundPer }}</span>
              </el-form-item>
              <el-form-item label="公积金基数">
                <span>{{ scope.row.salary.accumulationFundBase }}</span>
              </el-form-item>
              <el-form-item label="医疗保险比率">
                <span>{{ scope.row.salary.medicalPer }}</span>
              </el-form-item>
              <el-form-item label="医疗保险基数">
                <span>{{ scope.row.salary.medicalBase }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <div>
              <el-popover
                placement="left"
                width="160"
                @show="popoShow(scope.row.salary.name)"
                @hide="doEmpSalaryUpdate(scope.row.id)"
              >
                <div style="text-align: center; margin: 0">
                  <el-select v-model="updEmpSal" placeholder="请选择">
                    <el-option
                      v-for="item in salaries"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <el-button type="danger" slot="reference"
                  >修 改 员 工 工 资 账 套
                </el-button>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="empSalaries.total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SalSobCfg",
  data() {
    return {
      //更新弹窗
      editEmpDialogFormVisible: false,
      currentPage: 1,
      pageSize: 10,
      empSalaries: {},
      updEmpSal: "",
      //部门名
      showDepName: "",
      //所有工资账套名
      salaries: {},
      popoVisible: false
    };
  },
  mounted() {
    this.initempSalaries();
    this.initSalaries();
  },
  methods: {
    //初始化员工工资账套
    initempSalaries() {
      this.getRequest("/salary/sobcfg/").then(resp => {
        if (resp) {
          this.empSalaries = resp;
        }
      });
    },
    //初始化所有工资账套
    initSalaries() {
      this.getRequest("/salary/sobcfg/salaries")
        .then(resp => {
          if (resp) {
            this.salaries = resp;
          }
        })
        .catch(() => {});
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRequest(
        "/salary/sobcfg/?pageSize=" +
          this.pageSize +
          "&currentPage=" +
          this.currentPage
      )
        .then(resp => {
          if (resp) {
            this.empSalaries = {};
            this.empSalaries = resp;
          }
        })
        .catch(() => {});
    },
    //更换页面跳数方法
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getRequest(
        "/salary/sobcfg/?pageSize=" +
          this.pageSize +
          "&currentPage=" +
          this.currentPage
      )
        .then(resp => {
          if (resp) {
            this.empSalaries = {};
            this.empSalaries = resp;
          }
        })
        .catch(() => {});
    },
    //更新员工账套窗口
    popoShow(data) {
      this.popoVisible = true;
      this.updEmpSal = data;
    },
    //更新员工方法
    doEmpSalaryUpdate(data) {
      console.log(this.updEmpSal);
      console.log(data);
      if (typeof data === "number" && !isNaN(data)) {
        this.putRequest(
          "/salary/sobcfg/?eid=" + data + "&sid=" + this.updEmpSal
        ).then(resp => {
          if (resp) {
            this.initempSalaries();
          }
        });
      }
    }
  }
};
</script>

<style>
.sobClg .el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}
.sobClg .demo-table-expand {
  font-size: 0;
}
.sobClg .demo-table-expand label {
  width: 150px;
  color: #99a9bf;
}
.sobClg .demo-table-expand .el-form-item {
  width: 48%;
}
</style>
